<template>
  <!-- <el-tabs
    v-model="activeName"
    class="travel_order_tabs"
    @tab-change="tabChange"
  >
    <el-tab-pane v-if="permission.isCombo" name="travelgrouporder">
      <template #label>
        <el-badge>
          <span>拼团订单</span>
        </el-badge>
      </template>
      <TravelGroupOrder />
    </el-tab-pane>
    <el-tab-pane v-if="permission.isMember" name="travelorder">
      <template #label>
        <el-badge>
          <span>会员订单</span>
        </el-badge>
      </template>
      <el-main class="base_main_content">
        <TravelOrder type="order" routeName="travelorder" />
      </el-main>
    </el-tab-pane>
  </el-tabs> -->
  <el-main class="base_main_content">
    <TravelOrder type="order" routeName="travelorder" />
  </el-main>
</template>

<script setup>
import TravelOrder from "@com/order/TravelOrder.vue";
// import TravelGroupOrder from "@com/order/TravelGroupOrder.vue";
import { ref } from "vue";
import auth from "@net/auth";
import useRoute from "@util/router";

const permission = auth.getTravelOrder()

const route = useRoute();

const activeName = ref(route.name());

function tabChange(val) {
  route.push({ name: val });
}
</script>

<style lang="scss">
.travel_order_tabs {
  height: 100%;
  --el-tabs-header-height: 60px;
  border: none;
  .el-tabs__header {
    margin: 0;
  }
  .el-badge__content.is-fixed.is-dot {
    right: 0;
    top: 10px;
  }
  .el-tabs__content {
    height: calc(100% - 60px);
    overflow: hidden;
    margin: 0;
    padding: 0;
  }
  .el-main {
    height: calc(100vh - 120px) !important;
  }
}
.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 20px;
}
</style>
